<template>
  <div class="page">
    <div class="hr-content">
      <div class="flex justify-between align-center hr-stat">
        <div class="flex align-center hr" v-if="hrDetail">
          <image class="hr-icon" :src="hrDetail.avatar"></image>
          <div class="hr-name-txt">
            <div class="name">{{ hrDetail.company_name }}</div>
            <div class="txt">{{ hrDetail.name }}·HR</div>
          </div>
        </div>
        <div class="right_arrows ">
          <image class="star-icon" src="/static/icon/right_arrows.png"></image>
        </div>
      </div>
    </div>

    <div class="flex align-center justify-between  head">
      <div class="count">发布的职位</div>
      <div class="flex align-center filters">
        <div class="filter active">最新</div>
        <div class="border"></div>
        <div class="filter">默认</div>
      </div>
    </div>
    <div class="flex flex-column list-content">
      <template  v-for="(item, index) in hrDetail.jobs">
        <JobPerson  class="job-person" :job="{...item, user: hrDetail}"></JobPerson>
      </template>
      <NoData v-if="!hrDetail.jobs?.length">
        <div  style="color: #0D3333; text-align: center; min-height: 400rpx;line-height: 400rpx " > <span style="color: #24FAF6">暂无数据</span></div>
      </NoData>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {parseQuery} from "../../utils/URLParam";
  import {onMounted, shallowRef} from "vue";
  import {hrpage_data, jobDetail_data, jobList_data, jobListByHR_data} from "../../api/Job";
  import useQueryPage from "../../hooks/useQueryPage";
  import PersonT from "../../components/PersonT.vue";

  const job = shallowRef({});

  const {page, list, loading} = useQueryPage(jobListByHR_data, {})

  const hrDetail = shallowRef({});
  onMounted(() => {
    const {id} = parseQuery()
    hrpage_data({hr_id: id}).then(res => {
      hrDetail.value = res
    })
  })
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
}

.hr-content {
  height: 160rpx;
  border-top: 2rpx solid rgba(0,0,0,0.08);
  border-bottom: 2rpx solid rgba(0,0,0,0.08);
  padding: 32rpx 0;
  margin: 0 32rpx;
  .hr-stat {
    .hr {
      .hr-icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
      .hr-name-txt {
        padding: 0 22rpx;
        .name {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #000000;
          line-height: 34rpx;
          margin-bottom: 12rpx;
        }
        .txt {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 34rpx;
        }
      }
    }
    .star {
      width: 42rpx;
      height: 42rpx;
      .star-icon{
        width: 42rpx;
        height: 42rpx;
        background: #0D3333;
      }
    }
    .right_arrows {
      .star-icon {
        width: 8rpx;
        height: 24rpx;
        //border: 4rpx solid #979797;
      }
    }
  }
}
.head {
  height: 104rpx;
  background: #FFFFFF;
  border-bottom: 2rpx solid #EBEBEB;
  padding: 0 32rpx;
  .count {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 40rpx;
  }
  .filters {
    .filter {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #0D3333;
      line-height: 34rpx;
    }
    .border {
      width: 2rpx;
      height: 20rpx;
      background: rgba(13, 51, 51, 0.25);
      margin: 0 24rpx;
    }
  }
}
</style>
